import {
  elViewPosition,
  changeKeyframesString,
  endsTimeAnimation,
  SetStaticCssTxtFunc,
  removeClass,
} from '../global.js';

let pureTime = 0; // 单位 ms --毫秒

/**
 * @param {Object} el	--原目标元素
 * @param {Object} to	--to目标元素
 */
function fromToAnimate(el, to) {
  //to 目標元素 設置 opacity: 0;
  removeClass(to, 'opacity0', true);

  //获取 原目标元素位置
  let elpo = elViewPosition(el);
  //获取 to 目标元素位置
  let topo = elViewPosition(to);

  //播放 位移 动画
  avan(elpo, topo);

  //播放完动画后 显示 to 目標元素
  setTimeout(() => {
    // console.log(pureTime - 400);
    removeClass(to, 'opacity0');

    endsTimeAnimation(to, 'appear');
  }, pureTime - 400);
}

/**
 * @param {Object} lastPosition
 * @param {Object} currentPosition
 * 生成動畫 lastNode currentNode 的位置 過度 動畫
 */
function avan(lastPosition, currentPosition) {
  let frameName = 'avm';

  let defaultStyle = `.avw {
				display: block !important;
				position: absolute;
		
				animation-name: avm;
		
				animation-duration: 1.2s;
				animation-timing-function: ease-in-out;
				animation-delay: 0s;
				animation-fill-mode: forwards;
			}
			@keyframes avm {
				from {
					transform: translate(100px);
				}
				to {
					transform: translate(0px);
				}
			}`;

  //装载 style
  let setStaticStyle = SetStaticCssTxtFunc('focusMoveTo');
  setStaticStyle('test__sty', defaultStyle);

  let targetStyleEl = document.getElementById('test__sty');

  //關鍵過渡動畫
  let joinedKeyframesString = joinKeyframes(lastPosition, currentPosition);

  //修改 style标签 的内容 和 html 代码
  changeKeyframesString(
    targetStyleEl.sheet,
    frameName,
    `@keyframes ${frameName} {${joinedKeyframesString}}`
  );
  // resetFAMTAnimation(lastPosition, currentPosition);

  let testEl = document.getElementById('fam__focus');

  //如果 沒有找到元素 重新創建一個
  if (
    testEl == undefined ||
    testEl.nodeType == undefined ||
    testEl.nodeType !== 1
  ) {
    testEl = document.createElement('div');

    testEl.id = 'fam__focus';

    //基础样式 如果有其它样式选择 请先移除
    testEl.classList.add('fam_focus');

    document.body.appendChild(testEl);
  }

  // console.log(targetStyleEl);
  pureTime = endsTimeAnimation(testEl, 'avw');
}

//組裝 關鍵過渡動畫 keyframes
function joinKeyframes(lap, cup, scal) {
  //-- 默认大小 0.6
  //animation duration 1.2s
  // 移动动画 0.4s
  // 缩小 放大 0.2s
  // 最后 延迟印象 = 剩余时间 --0.4s
  scal = scal || 0.6;

  return `0%{
			width:${lap['width']}px;
			height:${lap['height']}px;
			left:${lap['left']}px;
			top:${lap['top']}px;
		}
		16%{
			width:${lap['width'] * scal}px;
			height:${lap['height'] * scal}px;
			left:${lap['left'] + lap['width'] * (1 - scal) * 0.5}px;
			top:${lap['top'] + lap['height'] * (1 - scal) * 0.5}px;
		}
		50%{
			width:${cup['width'] * scal}px;
			height:${cup['height'] * scal}px;
			left:${cup['left'] + cup['width'] * (1 - scal) * 0.5}px;
			top:${cup['top'] + cup['height'] * (1 - scal) * 0.5}px;
		}
		66%{
			width:${cup['width']}px;
			height:${cup['height']}px;
			left:${cup['left']}px;
			top:${cup['top']}px;
		}
		84%{
			width:${cup['width']}px;
			height:${cup['height']}px;
			left:${cup['left']}px;
			top:${cup['top']}px;
		}
		100%{
			width:${cup['width']}px;
			height:${cup['height']}px;
			left:${cup['left']}px;
			top:${cup['top']}px;
			opacity:.3;
	}`;
}

export { fromToAnimate };
